<template>
  <div class="jumpWrap h100">
    <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
    <!-- 搜索条件 -->
    <div class="jumpTop">
      <a-row :gutter="[8, 16]">
        <a-col
          :xs="14"
          :sm="14"
          :md="12"
          :lg="10"
          :xl="8"
          :xxl="8">
          <a-range-picker
            @change="onRangeChange"
            :allow-clear="true"
            :value="defaultDateRange"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            :disabled-date="disabledDate"
            style="width: 100%;" />
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="8"
          :lg="6"
          :xl="10"
          :xxl="10">
          <div class="searchBtns">
            <a-button type="info" @click="handleSearch">
              {{ $t('inquiry') }}
            </a-button>
            <a-button @click="clearCondition">
              {{ $t('clear') }}
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 搜索条件end -->
    <!-- 任务插队列表 -->
    <div class="jumpList">
      <s-table
        :columns="columns"
        :data-source="lists"
        :showPagination="false"
        :scrollX="900"
        :rowKey="(record,index)=>index"
        ref="table"
        class="h100"
      >
        <template
          slot-scope="text"
          v-for="column in commonColumns"
          :slot="column.scopedSlots.customRender"
        >
          <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
        </template>
        <template #queueJumpingTime="text">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import { STable } from '@/components'
import { jumpTbColumns } from './config/list'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import moment from 'moment'
import taskApi from '@/api/modules/task'
// 初始搜索条件
const initQuery = {
  startTime: moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
  endTime: moment().format('YYYY-MM-DD HH:mm:ss')
}
export default {
  components: {
    STable,
    FullParentDomWithDask,
    TableEllipsis
  },
  props: {
    mainQuery: {
      type: Object,
      default () {
        return null
      }
    }
  },
  data () {
    return {
      columns: jumpTbColumns,
      lists: [],
      loading: false,
      queryParams: {
        ...initQuery
      }
    }
  },
  computed: {
    commonColumns () {
      return jumpTbColumns.filter(item => !item.special)
    },
    // 日期选择的默认值
    defaultDateRange () {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    }
  },
  created () {
    console.log('jump')
    this.initData()
  },
  methods: {
    onRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endTime = dateString[1]
    },
    disabledDate (current) {
      return current > moment()
    },
    initData () {
      this.resetData()
      this.getData()
    },
    getData () {
      if (!this.mainQuery) {
        return
      }
      this.loading = true
      const params = { ...this.mainQuery, ...this.queryParams }
      if (params.startTime) {
        params.startTime = (new Date(params.startTime)).getTime()
      }
      if (params.endTime) {
        params.endTime = (new Date(params.endTime)).getTime()
      }
      taskApi.getTasktaskJumpList(params).then(res => {
        if (res.data) {
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleSearch () {
      this.getData()
    },
    clearCondition () {
      this.resetData()
      this.getData()
    },
    resetData () {
      this.queryParams = {
        ...initQuery
      }
      this.lists = []
    },
    calcTbodyHeight () {
      if (this.$refs.table) {
        this.$nextTick(() => {
          this.$refs.table.getDomHeight()
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.jumpWrap {
    position: relative;
    display: flex;
    flex-direction: column;
    .jumpTop {
        flex: none;
        margin-bottom: 16px;
    }
    .jumpList {
        flex: 1 0 0;
    }
}
</style>
